import React from "react";
import { Route, NavLink, Switch } from "react-router-dom";

import Header from "./components/Header";
import Home from "./pages/Home/index";
import About from "./pages/About";

function App() {
  return (
    <div className="app">
      <Header a="1" b="2" />
      <div className="main">
        <div className="left">
          <NavLink className="link" to="/home" activeClassName="hello">
            Home
          </NavLink>
          <NavLink className="link" to="/about" activeClassName="hello">
            About
          </NavLink>
        </div>
        <div className="right">
          {/* 
            如下代码，路由匹配规则是：
              1. 从上往下依次匹配
              2. 能匹配上的，都渲染出来
              特点：
                1. 效率不高，如果这里的规则很多的话（100条）每当 url地址发生变化，都会匹配100次
              如何处理这种效率问题：
                1. 一般我们会给 Route 包裹一层 Switch
          */}
          {/* <Route path="/home" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/home" component={About} /> */}

          {/* 
            如下代码，使用了 Switch 包裹 Route。匹配规则是：
              1. 从上往下依次匹配
              2. 匹配上之后不会往下继续匹配
              特点：
                高效
          */}
          <Switch>
            <Route path="/home" component={About} />
            <Route path="/home" component={Home} />
            <Route path="/about" component={About} />
          </Switch>
        </div>
      </div>
    </div>
  );
}

export default App;
